<template>

    菜单名称: <el-input v-model="page.menuName" style="width: 200px;" />
    <el-button type="primary" @click="getMenuList">查询</el-button>

    <el-table border :data="menuList" style="width: 1000px;margin-top: 10px;">
        <el-table-column type="index" :index="indexMethod" label="编号" />
        <el-table-column prop="menuName" label="菜单名称" />
        <el-table-column prop="url" label="菜单Url" />
        <el-table-column prop="pId" label="父级菜单名称" width="170">
            <template v-slot="scope">
                {{ scope.row.parentName == null ? '/' : scope.row.parentName.menuName }}
            </template>
        </el-table-column>
        <el-table-column prop="createName" label="创建人" />
        <el-table-column prop="createTime" label="创建时间">
            <template v-slot="scope">
                <el-text v-if="scope.row.createTime == null ? '' : scope.row.createTime">{{
        scope.row.createTime.replace("T", " ").substring(0, 19) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column prop="updateName" label="修改人" />
        <el-table-column prop="updateTime" label="修改时间">
            <template v-slot="scope">
                <el-text v-if="scope.row.updateTime == null ? '' : scope.row.updateTime">{{
        scope.row.updateTime.replace("T", " ").substring(0, 19) }}</el-text>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
            <template v-slot="scope">
                <el-button type="primary"
                    @click="router.push({ name: 'MenuUpdate', query: { menuId: scope.row.menuId } })">修改</el-button>
                <el-button type="danger" @click="delMenu(scope.row.menuId)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <table>
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="total, slot, prev, pager, next" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <span>,每页{{ page.pageSize }}条,当前第{{ page.pageIndex }}/{{ page.totalPage }}页</span>
                    <el-button @click="handleCurrentChange(1)" :disabled="page.pageIndex == 1"
                        class="btn-prev">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[3, 5, 8]" :background="true" layout="slot, sizes, jumper" prev-text="上一页"
                    next-text="下一页" :total="page.totalCount" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                    <el-button @click="handleCurrentChange(page.totalPage)" :disabled="page.pageIndex == page.totalPage"
                        class="btn-prev">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
const route = useRoute();
const router = useRouter();
const form = reactive({
})
//编号
const indexMethod = (index: number) => {
    return index + 1;
}
//分页
const page = reactive({
    menuName: '',
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    totalPage: 0
})

//显示
const menuList = ref([])
const getMenuList = () => {
    axios.get("/api/Menu/Show", {
        params: {
            MenuName: page.menuName,
            PageIndex: page.pageIndex,
            PageSize: page.pageSize
        }
    })
        .then(res => {
            menuList.value = res.data.data.list
            page.totalCount = res.data.data.totalCount
            page.totalPage = res.data.data.totalPage
            // console.log(menuList.value)
        })
        .catch(err => {
            console.log(err);
        })
}

//分页
const handleSizeChange = (val: number) => {
    page.pageSize = val;
    getMenuList();
}
const handleCurrentChange = (val: number) => {
    page.pageIndex = val;
    getMenuList();
}

//删除
const delMenu = (menuId: any) => {
    ElMessageBox.confirm(
        '确认要删除吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.get("/api/Menu/GetPId?MenuId=" + menuId)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessageBox.confirm(
                            '确认要删除全部吗?',
                            '警告',
                            {
                                confirmButtonText: '确认',
                                cancelButtonText: '取消',
                                type: 'warning',
                            }
                        )
                            .then(() => {
                                axios.post("/api/Menu/Delete", {
                                    menuId: menuId
                                })
                                    .then(res => {
                                        if (res.data.code == 0) {
                                            ElMessage.success("删除成功");
                                            getMenuList();
                                        }
                                    })
                            })
                            .catch(() => {
                                ElMessage({
                                    type: 'info',
                                    message: '已取消该操作',
                                })
                            })
                    }
                    else {
                        axios.post("/api/Menu/Delete", {
                            menuId: menuId
                        })
                            .then(res => {
                                if (res.data.code == 0) {
                                    ElMessage.success("删除成功");
                                    getMenuList();
                                }
                            })
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消该操作',
            })
        })
}

onMounted(() => {
    getMenuList();
})
</script>